<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex</title>
		<style>
			#main{
				display: flex;
				/* flex-direction:column-reverse; */
				/* flex-direction: row;
				/* flex-wrap: wrap;  
				flex-wrap: wrap-reverse; */
				flex-flow: row wrap;
			}
			#main div{
				margin: 5px;
				height: 100px;
				width: 300px;
				
				border: 2px solid goldenrod;
			}
			#main div:nth-of-type(3){
				order: 1;
			}
			#main div:nth-of-type(4){
				/***flex-grow属性定义项目的放大比例，
				默认为0，即如果存在剩余空间，也不放大*/
				flex-grow: 1.3;
			}
			
			#main2{
				display: flex;
				flex-flow: row nowrap;
				/* justify-content: center; */
				/* justify-content: space-between; */
				justify-content: space-around;
			}
			#main2 div:nth-of-type(4){
				 /*flex-shrink属性定义了项目的缩小比例，
				 默认为1，即如果空间不足，该项目将缩小
				 具体收缩的大小按照比例承担*/
				flex-shrink: 3;
				background-color: blanchedalmond;
			}
			#main2 div,#main3 div{
				height: 100px;
				width:160px;
				border: 2px solid green;
			}
			#main3{
				display: flex;
				flex-flow: row wrap;
				/*align-items属性定义项目在交叉轴上如何对齐。*/
				/* align-items: flex-end; */
				/* align-items: center; */
				align-items: baseline;
			}
			#main3 div:nth-of-type(1){
				/*flex-basis属性定义了在分配多余空间之前，
				项目占据的主轴空间（main size）*/
				/* flex-basis: 500px; */
				width: 500px;
				background-color: blue;
			}
			/*flex属性是flex-grow, flex-shrink 和 flex-basis的简写，
			默认值为0 1 auto*/
			#main3 div:nth-of-type(3){
				align-self: flex-end;
				background-color: red;
				 /*align-self属性允许单个项目有与其他项目
				 不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，
				 如果没有父元素，则等同于stretch。*/
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div>
			<div>11</div>
			<div>12</div>
		</div>
		<div id="main2">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div>
			<div>11</div>
			<div>12</div>
		</div>
		
		<div id="main3">
			<div>1</div>
			<div>2</div>
			<div style="height: 200px;">3</div>
			<div style="height: 300px;">4</div>
			<div>5</div>
			<div>6</div>
			<div style="height: 50px;">7</div>
			<div>8</div>
			<div>9</div>
			<div style="font-size: 50px;width: 300px;padding-top: 30px;">hello,flex</div>
			<div>11</div>
			<div>12</div>
		</div>
	</body>
</html>
